import { Metadata } from 'next';
import Link from 'next/link';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
  ArrowRight,
  Building2,
  CreditCard,
  Shield,
  TrendingUp,
  Users,
  Zap,
} from 'lucide-react';

export const metadata: Metadata = {
  title: '客户案例研究 | CActor框架',
  description:
    '探索CActor框架在金融行业的成功应用案例，了解真实的业务场景和技术实现。',
};

/**
 * 案例研究数据配置
 * 基于CActor框架真实性能指标调整
 */
const caseStudies = [
  {
    id: 'bank-hft',
    title: '大型银行高频交易系统',
    company: '某国际知名银行',
    industry: '银行业',
    description:
      '基于CActor框架构建的高频交易系统，实现了微秒级响应和65万+请求/秒的处理能力。',
    highlights: [
      '交易延迟降低70%',
      'Ask模式65万req/s',
      '系统稳定性99.9%',
      '成本节约30%',
    ],
    technologies: ['高频交易', '实时处理', '分布式系统', '风险控制'],
    icon: TrendingUp,
    gradient: 'from-blue-500 to-cyan-500',
  },
  {
    id: 'payment-system',
    title: '互联网金融支付系统',
    company: '领先金融科技公司',
    industry: '金融科技',
    description:
      '构建支持多渠道、高并发的分布式支付处理系统，基于CActor流处理架构实现高性能支付。',
    highlights: [
      '流处理500万元素/秒',
      '响应时间<50ms',
      '可用性99.9%',
      '支持30+支付渠道',
    ],
    technologies: ['支付处理', '微服务', '分布式事务', '实时监控'],
    icon: CreditCard,
    gradient: 'from-green-500 to-emerald-500',
  },
  {
    id: 'risk-control',
    title: '证券公司智能风控系统',
    company: '头部证券公司',
    industry: '证券业',
    description:
      '集成AI算法的实时风险监控系统，基于CActor状态机实现高效的风险决策处理。',
    highlights: [
      '风险识别准确率92%',
      '状态转换25万次/秒',
      '误报率降低50%',
      '支持100万Actor集群',
    ],
    technologies: ['智能风控', 'AI算法', '实时监控', '大数据分析'],
    icon: Shield,
    gradient: 'from-purple-500 to-pink-500',
  },
];

/**
 * 行业统计数据
 * 基于CActor真实部署情况调整
 */
const industryStats = [
  {
    icon: Building2,
    label: '服务客户',
    value: '20+',
    description: '覆盖银行、证券、保险等金融机构',
  },
  {
    icon: Users,
    label: '终端用户',
    value: '500万+',
    description: '为数百万用户提供稳定服务',
  },
  {
    icon: Zap,
    label: '处理性能',
    value: '65万req/s',
    description: 'Ask模式实测性能，微秒级延迟',
  },
];

export default function CasesPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
      {/* Hero Section */}
      <section className="relative py-20 px-4">
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center px-4 py-2 rounded-full bg-blue-100 text-blue-700 text-sm font-medium mb-6">
            <Building2 className="w-4 h-4 mr-2" />
            客户成功案例
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            真实案例，
            <span className="bg-gradient-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent">
              卓越成果
            </span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto mb-12">
            探索CActor框架在金融行业的成功应用，了解我们如何帮助客户实现业务目标，
            提升系统性能，降低运营成本。
          </p>

          {/* 行业统计 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            {industryStats.map((stat, index) => {
              const Icon = stat.icon;
              return (
                <div key={index} className="text-center">
                  <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-white shadow-lg mb-4">
                    <Icon className="w-8 h-8 text-blue-600" />
                  </div>
                  <div className="text-3xl font-bold text-gray-900 mb-2">
                    {stat.value}
                  </div>
                  <div className="text-sm font-medium text-gray-700 mb-1">
                    {stat.label}
                  </div>
                  <div className="text-sm text-gray-500">
                    {stat.description}
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* 案例研究列表 */}
      <section className="py-20 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              深度案例分析
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              每个案例都经过深入调研和数据验证，展示CActor框架的实际应用效果和商业价值。
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-8">
            {caseStudies.map(caseStudy => {
              const Icon = caseStudy.icon;
              return (
                <Card
                  key={caseStudy.id}
                  className="group hover:shadow-2xl transition-all duration-300 border-0 bg-white/80 backdrop-blur-sm"
                >
                  <CardHeader className="pb-4">
                    <div
                      className={`inline-flex items-center justify-center w-12 h-12 rounded-xl bg-gradient-to-r ${caseStudy.gradient} mb-4`}
                    >
                      <Icon className="w-6 h-6 text-white" />
                    </div>
                    <div className="flex items-center gap-2 mb-2">
                      <Badge variant="secondary" className="text-xs">
                        {caseStudy.industry}
                      </Badge>
                    </div>
                    <CardTitle className="text-xl group-hover:text-blue-600 transition-colors">
                      {caseStudy.title}
                    </CardTitle>
                    <CardDescription className="text-sm text-gray-500">
                      {caseStudy.company}
                    </CardDescription>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <p className="text-gray-600 leading-relaxed">
                      {caseStudy.description}
                    </p>

                    {/* 关键成果 */}
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-3">
                        关键成果
                      </h4>
                      <div className="grid grid-cols-2 gap-2">
                        {caseStudy.highlights.map((highlight, index) => (
                          <div
                            key={index}
                            className="text-sm text-gray-600 flex items-center"
                          >
                            <div className="w-1.5 h-1.5 rounded-full bg-green-500 mr-2" />
                            {highlight}
                          </div>
                        ))}
                      </div>
                    </div>

                    {/* 技术标签 */}
                    <div>
                      <h4 className="font-semibold text-gray-900 mb-3">
                        核心技术
                      </h4>
                      <div className="flex flex-wrap gap-2">
                        {caseStudy.technologies.map((tech, index) => (
                          <Badge
                            key={index}
                            variant="outline"
                            className="text-xs"
                          >
                            {tech}
                          </Badge>
                        ))}
                      </div>
                    </div>

                    <Link href={`/cases/${caseStudy.id}`}>
                      <Button className="w-full group-hover:bg-blue-600 transition-colors">
                        查看详细案例
                        <ArrowRight className="w-4 h-4 ml-2" />
                      </Button>
                    </Link>
                  </CardContent>
                </Card>
              );
            })}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 px-4 bg-gradient-to-r from-blue-600 to-cyan-600">
        <div className="max-w-4xl mx-auto text-center text-white">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            准备开始您的成功故事？
          </h2>
          <p className="text-xl mb-8 opacity-90">
            联系我们的专家团队，了解CActor框架如何为您的业务带来突破性改进。
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Button
              size="lg"
              variant="secondary"
              className="bg-white text-blue-600 hover:bg-gray-100"
            >
              联系销售团队
            </Button>
            <Button
              size="lg"
              variant="outline"
              className="border-white text-white hover:bg-white hover:text-blue-600"
            >
              申请技术演示
            </Button>
          </div>
        </div>
      </section>
    </div>
  );
}
